<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>CSS章节 第四课 的第一个文件</title>
	</head>

	<body>

		<div class="nav">
			<div class="bd">
				<ul class="right">
					<li class="cart">
						<a href="">我的淘宝</a>
						<div class="menu">
							<a href="">已买到的商品</a>
							<a href="">我的足迹</a>
						</div>
					</li>
					<li><a href="">购物车</a></li>
					<li><a href="">收藏夹</a></li>
					<li><a href="">商品分类</a></li>
				</ul>
			</div>
		</div>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

		<h1 align="center">CSS的应用技巧</h1>
		<hr>
		<ol>
			<li>
				CSS伪类<br>
				:hover 鼠标悬停
				:active 被激活的
				:focus 焦点元素
				:visited 已被访问的

				:first-child 元素的第一个子元素
			</li>
			<li>CSS伪类元素</li>
		</ol>

		<p>演示：</p>
		
		<div class="demo">
			<a class="hover" href="">hover</a>
			<a class="acrive" href="">acrive</a>
			<a class="focus" href="">focus</a>
			<input class="focus" type="text">
			<a class="visited" href="#2">visited</a>
		</div>


		<style>
			.demo a {
				display: block;
				width: 100px;
				height: 100px;
				line-height: 100px;
				text-align: center;
				background: #ccc;
				margin: 10px;
				text-decoration: none;
				color: blue;
			}
			.demo .hover:hover {
				color: red;
				background: blue;
			}
			.demo .acrive:active {
				color: pink;
				background: #999;
			}
			.demo .focus:focus {
				color: orange;
				background: #aaa;
			}
			.demo .visited:visited {
				color: black;
				background: #ddd;
			}







			body, ul {
				margin: 0;
				padding: 0;
			}
			li {
				list-style: none;
			}
			a {
				text-decoration: none;
			}

			.nav {
				background: #eee;
				height: 35px;
			}
			.nav .bd {
				width: 1200px;
				margin: 0 auto;
			}
			.nav .bd ul {
				float: right;
			}
			.nav .bd ul li {
				position: relative;
				float: left;
				height: 35px;
				line-height: 35px;
			}
			.nav .bd ul li > a {
				display: block;
				height: 33px;
				padding: 0 30px 0 15px;
				z-index: 2;
				border: 1px solid #eee;
			}
			.nav .bd ul li a {
				font-size: 12px;
				color: #6C6C6C;
			}
			.nav .bd ul li:hover > a {
				color: #F40;
				background: #fff;
				border-color: #fff;
			}
			.nav .bd ul li.cart:hover > a {
				position: relative;
				color: #F40;
				background: #fff;
				border: 1px solid #ccc;
				border-bottom: 2px solid #fff;
				/*bottom: -1px;*/
			}

			.nav .bd .menu {
				display: none;
				position: absolute;
				top: 35px;
				left: 0;
				width: 120px;
				background: #fff;
				padding: 4px 0;
				border: 1px solid #ccc;
				/*margin: 0 -1px;*/
			}
			.nav .bd ul li:hover .menu {
				display: block;
			}
			.nav .bd .menu a {
				display: block;
				padding: 4px 20px;
			}
			.nav .bd .menu a:hover {
				background: #eee;
			}


		</style>

	</body>
</html>